<template>
  <div class="home">
    <!-- <vue-pdf
      v-for="(item) of numPages"
      :key="item"
      :src="pdfSrc"
      :page="item"
    ></vue-pdf> -->
    <!-- <div id="pdfId"></div> -->
    <vue-office-pdf
        :src="pdfSrc"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import VuePdf from 'vue-pdf'
// import Pdfh5 from 'pdfh5'
// import 'pdfh5/css/pdfh5.css'

// 引入VueOfficeDocx组件
import VueOfficePdf from '@vue-office/pdf'
// 引入相关样式

export default {
  name: 'HomeView',
  components: {
    // VuePdf,
    VueOfficePdf
  },
  data () {
    return {
      pdfSrc:
        'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      numPages: undefined,
      pdfh5: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.initPdf()
      // this.getNumPages(this.pdfSrc)
    })
  },
  methods: {
    renderedHandler () {
      console.log('渲染完成')
    },
    errorHandler () {
      console.log('渲染失败')
    },
    // initPdf () {
    //   this.pdfh5 = new Pdfh5('#pdfId', {
    //     pdfurl: this.pdfSrc
    //   })
    // },
    getNumPages (url) {
      const loadingTask = VuePdf.createLoadingTask(url)
      loadingTask.promise
        .then((pdfData) => {
          // this.pdfSrc = loadingTask
          this.numPages = pdfData.numPages
        })
    }
  }
}
</script>

<style scoped>
</style>
